<template>
  <div class="customer-attend-container">
    <div class="card">
      <div class="flex flex-row justify-between items-start">
        <div class="flex flex-row">
          <img class="head-img" src="@/assets/customer/custom-head.png" />
          <div>
            <h4>{{ item.name }}</h4>
            <div class="attend-des flex flex-col">
              {{ description }}
              <div v-if="haveAttendMeeting" class="ml-1">
                已沟通{{ item.meetInfos?.length }}次
              </div>
              <div v-else class="ml-1">未参会</div>
            </div>
          </div>
        </div>
        <div
          class="flex flex-row items-center cursor-pointer"
          @click="toggle"
          v-show="haveAttendMeeting"
        >
          <div class="mr-1 text-sm">{{ showDetail ? "收起" : "展开" }}</div>
          <van-icon :name="showDetail ? 'arrow-up' : 'arrow-down'" color="#8C8C8C" />
        </div>
      </div>

      <div v-show="showDetail && haveAttendMeeting" v-ai-tip="'bottom-right'">
        <hr />
        <div class="session-view flex flex-row items-center" v-show="showDetail">
          <div class="session-view-line"></div>
          <div class="session-title">核心观点</div>
          <p>近 5次的观点总结</p>
        </div>

        <p class="mb-3">
          <markdown :content="report" />
        </p>

        <div class="session-view flex flex-row">
          <div class="session-view-line"></div>
          <div class="session-title">沟通明细</div>
        </div>

        <div class="communication-Detail flex flex-col">
          <div
            class="flex flex-col meet-record-card"
            v-for="(meetInfo, index) in item.meetInfos"
            :key="meetInfo.conferenceId"
          >
            <div
              class="flex flex-row justify-between items-center cursor-pointer"
              @click="clickMeetRecord(meetInfo)"
            >
              <div class="flex flex-col mt-4">
                <div class="session-title">{{ meetInfo.subject }}</div>
                <div class="mt-2 text-[#8C8C8C] text-xs">
                  {{ meetInfo.startTime.slice(0, 16) }}
                </div>
              </div>
              <van-icon name="arrow" />
            </div>
            <hr />
            <div class="flex flex-row mb-4">
              <div class="session-title mr-3">态度</div>
              <img :src="mapIcon(meetInfo)" />
            </div>

            <p>
              {{ meetInfo.summary }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed, ref } from "vue";
import activeIcon from "@/icons/svg/customer/active.svg"; // 积极
import negativeIcon from "@/icons/svg/customer/negative.svg"; // 消极
import neutralIcon from "@/icons/svg/customer/neutral.svg"; // 中性
import { openMeetingRecord } from "@/utils/urlTool";
import markdown from "@/components/markdown.vue";
import { useCustomerStore } from "@/store";

const showDetail = ref(false);
const store = useCustomerStore();

const props = defineProps({
  item: {
    type: Object,
    default: {},
  },
});

function clickMeetRecord(info) {
  const { conferenceId } = info;
  openMeetingRecord(conferenceId);
}

const report = computed(() => {
  if (!props.item.requirementAnalysis) {
    return "正在生成中...";
  }
  return props.item.requirementAnalysis?.总结 || "-";
});

const icon = computed(() => {
  return activeIcon;
});

const haveAttendMeeting = computed(() => {
  return props.item.meetInfos && props.item.meetInfos.length > 0;
});

function mapIcon(meetInfo) {
  const attitude = meetInfo.attitude;
  if (attitude === "积极") return activeIcon;
  if (attitude === "消极") return negativeIcon;
  if (attitude === "中性") return neutralIcon;
  return activeIcon;
}

function toggle() {
  showDetail.value = !showDetail.value;
}

const outerFiledTemple = computed(() => store.outerFiledTemple);

const description = computed(() => {
  return getCustomerStatus(props.item).join("|");
});

function getCustomerStatus(customer, maxLength = 5) {
  const { formData = {} } = customer;
  const fieldValues = formData?.fieldValues || [];
  let statusArray = [];
  for (const outerFiled of outerFiledTemple.value) {
    const obj = fieldValues.find((v) => v.fieldId === outerFiled.id) || {};
    const { fieldName } = outerFiled;
    const { fieldValue } = obj;
    if (fieldValue) {
      statusArray.push(fieldName + ":" + fieldValue);
    }
  }
  if (statusArray.length > maxLength) {
    statusArray = statusArray.slice(0, 11);
    statusArray.push(" ......");
  }
  return statusArray;
}
</script>

<style lang="less" scoped>
.customer-attend-container {
  .card {
    border-radius: 8px;
    border: 1px solid #e9e9e9;
    padding: 18px 15px;
    background-color: white;

    hr {
      border-color: #e9e9e9;
      margin: 15px 0;
    }

    p {
      font-weight: 400;
      font-size: 14px;
      color: #595959;
      line-height: 24px;
    }

    .head-img {
      width: 44px;
      height: 44px;
      margin-right: 12px;
    }

    h4 {
      font-weight: 500;
      font-size: 16px;
      color: #262626;
    }

    .attend-des {
      font-weight: 400;
      font-size: 14px;
      color: #8c8c8c;
      line-height: 22px;
    }

    .session-view {
      font-weight: 600;
      font-size: 14px;
      color: #262626;
      line-height: 24px;
      margin: 0 0 15px 0;
      padding-left: 8px;
      position: relative;

      p {
        font-weight: 400;
        font-size: 12px;
        color: #8c8c8c;
        line-height: 24px;
        margin-left: 8px;
      }
    }

    .session-view-line {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 2px;
      background-color: #436bff;
    }

    .session-title {
      font-weight: 500;
      font-size: 14px;
      color: #262626;
    }

    .communication-Detail {
    }

    .meet-record-card {
      background-color: #f9fafc;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
    }
  }
}
</style>
